<template>
    <div>
        <div class="download-app">
            <div class="icon" style="--icon: url(/icon/app/android.png)"></div>
            <div class="icon" style="--icon: url(/icon/app/ios.png)"></div>
        </div>
        <div class="btn-box" v-if="is_login">
            <div class="logout-btn" @click="logoutPage.open">Log Out</div>
        </div>
    </div>
</template>

<script setup>
import { is_login, logoutPage } from '@/service/auth';
</script>

<style scoped lang="less">
.download-app {
    width: 80%;
    height: 13vw;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 5vw;

    .icon {
        flex: 1;
        height: 100%;
    }
}

.btn-box {
    width: 100%;
    margin-top: 3vw;

    .logout-btn {
        --h: 12vw;
        width: 100%;
        height: var(--h);
        text-align: center;
        line-height: var(--h);
        color: #fff;
        font-size: 3vw;
        font-weight: 500;
        background: var(--negative-number-color);
        border-radius: 2vw;
    }
}
</style>